<template>
    <div class="text-sm p-1 pl-2 rounded pointer" :class="{ 'bg-white': isSelected, 'text-blue-500': isSelected }">
        <div @click="emit('update:modelValue', label)">
            <el-space style="position:relative;">
                <div v-show="isSelected" class=" bg-blue-500 rounded line"> </div>
                <el-icon :size="28" class=" bg-white rounded p-1">
                    <component :is="icon" />
                </el-icon>
                <span>{{ label }}</span>
            </el-space>
        </div>
        <div v-if="label === '曲库' && modelValue === '曲库'" class="pl-10">
            <div class="p-1" :class="{ 'text-gray-500': router.currentRoute.value.path.indexOf('en') >= 0 }"
                @click="emit('update:modelValue', label)">中文歌曲</div>
            <div class="p-1" :class="{ 'text-gray-500': router.currentRoute.value.path.indexOf('en') < 0 }"
                @click="onPage('/songbook/en')">英文歌曲</div>
        </div>
    </div>
</template>
<script setup>
import { computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
    label: String,
    icon: Object,
    modelValue: String
});



const isSelected = computed(() => props.modelValue === props.label);

const onPage = function (route) {
    router.replace(route);
}
const emit = defineEmits(['update:modelValue']);

// onMounted(() => {

    // console.log(router.currentRoute);
// })
</script>
<style scoped>
.pointer {
    cursor: pointer;
}

.line {
    position: absolute;
    left: 0px;
    top: 5px;
    width: 4px;
    height: 18px;
}
</style>